<template>
    <div>
        <Row style="margin:10px;">
            <i-col span="24">
                <Button type="primary" icon="ios-add" size="small" @click="addUser">添加</Button>
            </i-col>
        </Row>
        <Divider />
        <div>
            <div v-for="(user,key) in userList" :key="key" style="padding:10px;">
                <Card>
                    <div slot="title">
                        <Avatar style="background-color: #87d068;float:left" icon="ios-person" />
                        <div  style="margin-left:40px;padding-top:10px;">
                        <p>{{user.name}}</p>
                     </div>
                    </div>
                    <template slot="extra">
                        <a href="#" @click.prevent="changeLimit">
                        <Icon type="ios-loop-strong"></Icon>
                        编辑
                    </a>
                    <a href="#" @click.prevent="changeLimit">
                        <Icon type="ios-loop-strong"></Icon>
                        删除
                    </a>
                    </template>
                    <Row>
                        <i-col>{{user}}</i-col>
                    </Row>
                </Card>
            </div>
        </div>
        <Modal v-model="userFormModal" draggable scrollable title="添加用户" :mask-closable="false">
            <div>
                <Form ref="userForm" :model="userForm" :rules="userFormRule" :label-width="100">
                    <FormItem label="是否启用">
                        <i-switch size="large" v-model="userForm.enabled">
                            <span slot="open">启用</span>
                            <span slot="close">禁用</span>
                        </i-switch>
                    </FormItem>
                </Form>
            </div>
            <div slot="footer">
                <Button type="text" size="small" @click="userFormModal = false">取消</Button>
                <Button type="primary" size="small" >提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
export default {
  data () {
    return {
        userFormModal: false,
        userForm: {
            enabled: true
        },
        userFormRule:{

        },
        userList: []
    }
  },
  mounted () {
      this.getUserList();
  },
  methods: {
      /**
       * 点击用户
       */
      addUser () {
        this.$refs['userForm'].resetFields();
        this.userFormModal = true;
      },
      getUserList () {
          this.$axios.get('/adminapi/hello')
          .then(res => {
              this.userList = res.data
          })
      }
  }
}
</script>

<style scoped>
.ivu-divider-horizontal{
    margin: 0;
}
</style>
